<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World | bywwwgzs | 个人博客</title>
    <!-- 引入Tailwind CSS -->
    <script src="../../zy/webside/st/tailwind.css"></script>
    <!-- 引入Font Awesome -->
    <link href="../../zy/webside/nd/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-gray-50 text-dark antialiased">
    <!-- 导航栏 -->
    <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <!-- 博客logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                    <span class="font-bold text-xl">bywwwgzs</span>
                </a>
                
                <!-- 桌面导航菜单 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="font-medium hover:text-primary transition-colors">首页</a>
                    <a href="article.html" class="font-medium text-primary transition-colors">文章</a>
                    <a href="about.html" class="font-medium hover:text-primary transition-colors">关于</a>
                </nav>
                
                <!-- 移动菜单按钮 -->
                <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-bars text-gray-600"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="index.html" class="block py-2 font-medium hover:text-primary transition-colors">首页</a>
                <a href="article.html" class="block py-2 font-medium text-primary transition-colors">文章</a>
                <a href="about.html" class="block py-2 font-medium hover:text-primary transition-colors">关于</a>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 文章内容 -->
        <section class="py-12 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <article class="max-w-3xl mx-auto">
                    <!-- 文章标题和元数据 -->
                    <div class="mb-10 text-center">
                        <span class="inline-block bg-blue-100 text-primary text-sm font-medium px-3 py-1 rounded-full mb-4">编程入门</span>
                        <h1 class="text-3xl md:text-4xl font-bold mb-4">Hello World：编程世界的第一步</h1>
                        <div class="flex flex-col sm:flex-row items-center justify-center text-gray-500 text-sm">
                            <div class="flex items-center mb-2 sm:mb-0">
                                <img src="../../zy/photo/picsum/id_1012_100_100.jpg" alt="作者头像" class="w-6 h-6 rounded-full object-cover mr-2">
                                <span>吕洞宾吖8204</span>
                            </div>
                            <span class="mx-2 hidden sm:inline">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2025-10-08</span>
                            <span class="mx-2 hidden sm:inline">|</span>
                            <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 5 分钟阅读</span>
                        </div>
                    </div>
                    
                    <!-- 文章封面图 -->
                    <div class="mb-10 rounded-xl overflow-hidden">
                        <img src="https://picsum.photos/id/0/1200/600" alt="Hello World 编程概念图" class="w-full h-auto">
                    </div>
                    
                    <!-- 文章正文 -->
                    <div class="prose prose-lg max-w-none mb-10">
                        <p class="lead text-xl text-gray-700 mb-6">
                            对于每一位踏入编程世界的新手来说，"Hello World"程序都是他们编写的第一个程序。这个简单的程序虽然功能单一，仅仅是在屏幕上输出"Hello World"这句话，但它却承载着特殊的意义。
                        </p>
                        
                        <h2>Hello World的历史</h2>
                        <p>
                            "Hello World"程序的起源可以追溯到1972年，当时贝尔实验室的Brian Kernighan在一本关于B语言的教程中首次使用了类似的例子。后来在1978年，他与Dennis Ritchie合著的《C程序设计语言》一书中，正式使用了"hello, world"作为第一个示例程序。
                        </p>
                        <p>
                            从那以后，"Hello World"成为了编程入门的传统，几乎所有的编程语言教程都会以一个输出"Hello World"的程序作为开始。
                        </p>
                        
                        <h2>为什么是Hello World？</h2>
                        <p>
                            选择"Hello World"作为第一个程序有几个原因：
                        </p>
                        <ul>
                            <li>它足够简单，能够让新手快速理解基本的编程概念</li>
                            <li>它能验证开发环境是否正确配置</li>
                            <li>它展示了编程语言最基本的输出功能</li>
                            <li>它建立了一个简单的里程碑，给初学者带来成就感</li>
                        </ul>
                        
                        <h2>不同编程语言的Hello World</h2>
                        <p>虽然目的相同，但不同的编程语言实现"Hello World"的方式各有不同：</p>
                        
                        <h3>HTML</h3>
                        <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
    Hello World!
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                        
                        <h3>JavaScript</h3>
                        <pre><code>console.log("Hello World!");</code></pre>
                        
                        <h3>Python</h3>
                        <pre><code>print("Hello World!")</code></pre>
                        
                        <h3>Java</h3>
                        <pre><code>public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}</code></pre>
                        
                        <h2>总结</h2>
                        <p>
                            "Hello World"虽然简单，却是每个程序员旅程的起点。它代表着好奇心、探索精神和学习新知识的勇气。当你成功运行第一个"Hello World"程序时，你已经迈出了成为程序员的第一步。
                        </p>
                        <p>
                            记住这种成就感，它将伴随你解决更复杂的问题，编写更强大的程序。编程的世界充满无限可能，而你的旅程才刚刚开始。
                        </p>
                    </div>
                    
                    <!-- 作者信息 -->
                    <div class="border-t border-gray-200 pt-8 pb-6">
                        <div class="flex items-center">
                            <img src="../../zy/photo/picsum/id_1012_100_100.jpg" alt="作者头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-4">
                                <h3 class="font-bold">吕洞宾吖8204</h3>
                                <p class="text-gray-600 text-sm">开发者 ｜ 白云万维网工作室室长</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文章导航 -->
                    <div class="flex flex-col md:flex-row justify-between items-center gap-4 mt-10 pt-8 border-t border-gray-200">
                        <a href="index.html" class="flex items-center text-primary hover:text-primary/80 font-medium transition-colors">
                            <i class="fa fa-arrow-left mr-2"></i> 返回首页
                        </a>
                        <a href="about.html" class="flex items-center text-primary hover:text-primary/80 font-medium transition-colors">
                            了解作者 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
            </div>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                        <span class="font-bold text-xl">bywwwgzs</span>
                    </div>
                    <p class="text-gray-400 text-sm">本网站由白云万维网工作室设计</p>
                </div>
                <p class="text-gray-500 text-sm">
                    &copy; 2025 bywwwgzs 博客. 保留所有权利.
                </p>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 移动菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 代码块样式增强
        document.querySelectorAll('pre code').forEach(block => {
            block.classList.add('bg-gray-100', 'p-4', 'rounded-lg', 'block', 'overflow-x-auto');
        });
    </script>
</body>
</html>
